<template>
	<view>
		<cu-custom bgColor="bg-white" isBack="true">
			<block slot="content">{{addressId?'编辑收货地址':'新建收货地址'}}</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="address_bj">
				<view class="address_bj_a">
					<view class="address_bj_a_a">联系姓名</view>
					<view class="address_bj_a_b">
						<input v-model="addressObj.contact" name="contact" type="text" placeholder="请填写联系姓名" />
					</view>
				</view>
				<view class="address_bj_a">
					<view class="address_bj_a_a">联系方式</view>
					<view class="address_bj_a_b">
						<input name="telephone" v-model="addressObj.telephone" type="number" placeholder="请填写联系方式"></input>
					</view>
				</view>
				<view class="address_bj_a" @click="showRegion = true">
					<view class="address_bj_a_a">所在地区</view>
					<view class="address_bj_a_b" style="margin-top: 35rpx;height:auto;" :style="'background-image:url('+(gengduo_icon)+');'">
						<AddressPicker @change="regionChange" :level="3">{{planLocate}} </AddressPicker>
					</view>
				</view>
				<view class="address_bj_a" style="border:0">
					<view class="address_bj_a_a">详细地址</view>
					<view class="address_bj_a_b">
						<input name="address" v-model="addressObj.address" type="text" placeholder="请填写详细地址"></input>
					</view>
				</view>
			</view>
			
			<view class="address_bj">
				<view class="address_bj_a" style="border:0">
					<view class="address_bj_a_a" style="width: 175rpx;">设为默认地址</view>
					<view class="address_bj_a_b">
						<view style="float: right;margin-top: 25rpx;">
							<u-switch v-model="addressObj.is_default" @change="change_default" active-color="#5ed4f5" inactive-color="#9b9b9b"></u-switch>
						</view>
					</view>
				</view>
			</view>
			<view class="address_add">
				<view class="address_add_a" @click="formSubmit">保存并使用</view>
			</view>
			
			
		</view>
	</view>
</template>
<script>
import request from '@/common/request.js';
import AddressPicker from "@/components/lingdang-AddressPicker/AddressPicker.vue"
import {
	loadingType
} from '@/utils/type';
export default {
	components:{
		AddressPicker
	},
	data() {
		return {
			showLoading:true,
			gengduo_icon:request.baseUrl_img+'/img/gengduo_icon.png',
			addressObj: {
			  contact: '',
			  telephone: '',
			  province_id: '',
			  city_id: '',
			  district_id: '',
			  address: '',
			  uid:0,
			  is_default:Boolean(0)
			},
			region: '',
			addressId: '',
			defaultRegion:['广东省','广州市','番禺区'],
			defaultRegionCode:'440113',
			planLocate:'请选择省、市、区',
			uid:0,
		}
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
	  this.addressId = parseInt(options.id)
	  if (options.id) {
		this.uid=uni.getStorageSync('uid');
	    this.getOneAddressFun();
	  }else{
		  this.showLoading=false;
	  }
	  // this.$nextTick(() => {
	  //     this.lists = area
	  // })
	},
	onShow() {
		this.uid=uni.getStorageSync('uid');
		this.addressObj.uid =this.uid;
	},
	methods: {
		formSubmit() {
			let paramsList=this.addressObj;
			if (!paramsList.contact){
				uni.showToast({
				    title:'请填写收货人姓名',
					icon:'none',
				    duration: 2000
				});
				return;
			}
			if (!paramsList.telephone){
				uni.showToast({
				    title:'请填写手机号码',
					icon:'none',
				    duration: 2000
				});
				return;
			}
			if (!this.region){
				uni.showToast({
				    title:'请选择省、市、区',
					icon:'none',
				    duration: 2000
				});
				return;
			}
			if (!paramsList.address){
				uni.showToast({
				    title:'请填写小区、街道、门牌号等信息',
					icon:'none',
				    duration: 2000
				});
				return;
			}
			paramsList.id =this.addressId;
			paramsList.is_default = Number(paramsList.is_default);
			let url='ua-add';
			if(this.addressId){
				url='ua-update';
			}
			let optsList = {
				url:url,
				method: 'post'
			};
			let _this=this;
			uni.showLoading({
				title: '提交中...',
				mask: true
			})
			request.httpTokenRequest(optsList, paramsList).then(res => {
				uni.showToast({
				    title: res.data.msg,
					icon:'none',
				    duration: 2000
				});
				uni.hideLoading();
				if(res.data.code == 200){
					uni.navigateBack({
						delta: 1
					});
				}
			});
		},
		change_default(e){
			this.addressObj.is_default =e;
		},
		regionChange(region) {
		  this.addressObj.province_id = region.data[0].id;
		  this.addressObj.city_id = region.data[1].id;
		  this.addressObj.district_id = region.data[2].id;
		  this.planLocate= region.data[0].name + " " + region.data[1].name + " " + region.data[2].name;
		  this.region= region.data[0].name + " " + region.data[1].name + " " + region.data[2].name;
		},
		getOneAddressFun() {
			let paramsList = {
				uid:this.uid,
				id:this.addressId,
			}
			let optsList = {
				url: 'ua-detail',
				method: 'get'
			};
			let _this=this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					let {
					  city,
					  province,
					  district
					} = res.data.data;
					this.addressObj = res.data.data;
					this.addressObj.is_default=Boolean(this.addressObj.is_default);
					this.addressObj.uid =_this.uid;
					this.region = `${province} ${city} ${district}`;
					this.planLocate = `${province} ${city} ${district}`;
					this.showLoading=false;
				}
			});
		}
	}
}
</script>

<style  lang="scss" scoped>
	.address_bj{
		background-color: #fff;
		margin-top: 20rpx;
		width: 750rpx;
		overflow: hidden;
	}
	.address_bj_a{
		border-bottom: 1rpx solid #E5E5E5;
		height: 108rpx;
		width: 702rpx;
		margin: auto;
	}
	.address_bj_a_a{
		width: 160rpx;
		float: left;
		line-height: 108rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		text-align: left;
	}
	.address_bj_a_b{
		float: right;
		width: 500rpx;
		height: 108rpx;
		background-position:right;
		background-size: 11rpx 20rpx;
		background-repeat: no-repeat;
	}
	.address_bj_a_b input{
		width: 500rpx;
		line-height: 108rpx;
		height: 108rpx;
	}
	.address_add{
		width: 750rpx;
		height: 104rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.address_add_a{
		width: 702rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #18278f, #18278f);
		border-radius: 40rpx;
		margin: auto;
		margin-top: 13rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}
</style>
